matrix3d()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
The matrix3d()
CSS function defines a 3D transformation as a 4x4 homogeneous matrix.
Its result is a <transform-function>
data type.
Try it
Syntax
The matrix3d()
function is specified with 16 values. They are described in the column-major order.
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
Values
- a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3
-
Are
<number>
s describing the linear transformation. - a4 b4 c4 d4
-
Are
<number>
s describing the translation to apply.
Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
---|---|---|---|
This transformation applies to the 3D space and can't be represented on the plane. | A generic 3D affine transformation can't be represented using a Cartesian-coordinate matrix, as translations are not linear transformations. |
Examples
Cube squashing example
The following example shows a 3D cube created from DOM elements and transforms, which can be hovered/focused to apply
a matrix3d()
transform to it.
HTML
<section id="example-element" tabindex="0">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</section>
CSS
#example-element {
width: 100px;
height: 100px;
transform-style: preserve-3d;
transition: transform 1.5s;
transform: rotate3d(1, 1, 1, 30deg);
margin: 50px auto;
}
#example-element:hover,
#example-element:focus {
transform: rotate3d(1, 1, 1, 30deg)
matrix3d(1, 0, 0, 0, 0, 1, 6, 0, 0, 0, 1, 0, 50, 100, 0, 1.1);
}
.face {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
backface-visibility: inherit;
font-size: 60px;
color: #fff;
}
.front {
background: rgb(90 90 90 / 70%);
transform: translateZ(50px);
}
.back {
background: rgb(0 210 0 / 70%);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgb(210 0 0 / 70%);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgb(0 0 210 / 70%);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgb(210 210 0 / 70%);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgb(210 0 210 / 70%);
transform: rotateX(-90deg) translateZ(50px);
}
Result
Matrix translation and scale example
Another transform3d()
example, which implements an animated combined translate and scale.
HTML
<div class="foo">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quaerat sit
soluta, quisquam exercitationem delectus qui unde in facere necessitatibus aut
quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
</div>
CSS
html {
width: 100%;
}
body {
height: 100vh;
/* Centering content */
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
}
.foo {
width: 50%;
padding: 1em;
color: white;
background: #ff8c66;
border: 2px dashed black;
text-align: center;
font-family: system-ui, sans-serif;
font-size: 14px;
/* Setting up animation for better demonstration */
animation: MotionScale 2s alternate linear infinite;
}
@keyframes MotionScale {
from {
/*
Identity matrix is used as basis here.
The matrix below describes the
following transformations:
Translates every X point by -50px
Translates every Y point by -100px
Translates every Z point by 0
Scales down by 10%
*/
transform: matrix3d(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
-50, -100, 0, 1.1
);
}
50% {
transform: matrix3d(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 0.9
);
}
to {
transform: matrix3d(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
50, 100, 0, 1.1
)
}
}
Result
Specifications
Specification |
---|
CSS Transforms Module Level 2 # funcdef-matrix3d |
Browser compatibility
BCD tables only load in the browser
See also
transform
- Individual transform properties:
<transform-function>